<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notepad</title>

  <!-- bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- animate.css -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- mui -->
  <link rel="stylesheet/less" href="./assets/plugins/mui/css/mui.min.css" />

  <!-- 重置样式 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less" />

  <!-- 公共样式 -->
  <link rel="stylesheet/less" href="./assets/css/common.less" />

  <!-- 页面独立的 -->
  <link rel="stylesheet/less" href="./assets/css/UserIndex.less" />
</head>

<body>
  <!-- 用户信息 -->
  <div class="user">
    <div class="avatar wow fadeInUp">
      <img src="./assets/images/avatar.png" />
    </div>

    <div class="nickname wow fadeInUp" data-wow-delay="100ms">FunkyRicky</div>
  </div>

  <!-- 菜单 -->
  <div class="menulist wow fadeInUp" data-wow-delay="300ms">
    <a href="profile.html" class="item">
      <span>基本资料</span>
      <img src="./assets/images/row.png" />
    </a>
    <a href="typeindex.html" class="item">
      <span>卡片分类</span>
      <img src="./assets/images/row.png" />
    </a>
    <a href="javascript:void(0)" class="item" id="logout">
      <span>退出登录</span>
      <img src="./assets/images/row.png" />
    </a>
  </div>

  <!-- 底部 -->
  <div class="tabbar">
    <div class="box">
      <a href="index.html" class="item">
        <span class="icon glyphicon glyphicon-home"></span>
        <span class="name">首页</span>
      </a>
      <a href="typeindex.html" class="item">
        <span class="icon glyphicon glyphicon-list-alt"></span>
        <span class="name">新建</span>
      </a>
      <a href="user.html" class="item">
        <span class="icon glyphicon glyphicon-user"></span>
        <span class="name">我的</span>
      </a>
    </div>
  </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 引入接口插件+封装请求的方法 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- bootstrap-validator -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 引入helpers校验用户 -->
<script src="./assets/plugins/helpers.js"></script>

<script>
  //实例化wow.js
  new WOW().init();

  // 因为helpers中的变量是临时变量，判断完就消失了，但是结尾保存到了cookie里，所以这个页面要用cookie数据就还需要声明一个变量去获取这个cookie
  //   为什么这里还要做一次非空校验？;
  //   因为要考虑到校验失败退出去的情况，此时头像和名称需要修改回空或默认
  let business = cookie.get("business") ? cookie.get("business") : {};
  console.log(business);

  if (JSON.stringify(business) != "{}") {
    business = JSON.parse(business);
    // console.log(business);

    $(".avatar img").attr("src", business.avatar);
    $(".nickname").text(business.nickname);
  }

  // 退出
  $("#logout").click(() => {
    mui.confirm("是否确认退出", "退出确认", ["退出", "取消"], function (e) {
      //   console.log(e);
      if (e.index == 0) {
        location.href = "login.html";
      }
    });
  });
</script>